<html>
<head>
	<link rel="stylesheet" href="css/eggplant/jquery-ui-1.8.18.custom.css" type="text/css">
	<script src="js/jquery-1.7.2.min.js" type="text/javascript" ></script>
	<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	<script src="js/ClassDiagramPlugin.js" type="text/javascript"></script>
	<style>
		.divsize { width:50px;height:50px;border:1px solid black; float:left }
		.leftround { border-top-left-radius:15px;border-bottom-left-radius:15px }
		.rightround { border-top-right-radius:15px;border-bottom-right-radius:15px }
	</style>
</head>
<body>
	<!--<div id="Subject">No subject</div>-->
	Current topic:
	<div id="Topic">No topic</div>
	<div><button id="understand">understand</button>
	<button id="dontunderstand">dont understand</button></div>
	<div><img src="css/understand_mini.png"></img><img src="css/confused_mini.png"></img></div>
	<div id="testdiv" style="display:none"><a href="test.html">Test</a></div>
<script>
	var Subjects;

	jQuery(function () {
		$('#understand').button().click(function () {
			$.get('/studentInput', { Understand: 'True' },
			 function() {
			 	console.log("input success")
			 });
		});
		
		$('#dontunderstand').button().click(function () {
			$.get('/studentInput', { Understand: 'False' }, 
			function () {
				console.log("input success")
			});
		});
		setInterval("getClassData()", 5000);

		Subjects = $.getJSON('/getClassLayoutData', null, function (data) {
				Subjects = data;
				getClassData();
		});
	});

	var getClassData = function () {
		$.getJSON('/getClassData', null, function (data) { 
			for (var i in Subjects)
				if (Subjects[i].index == data.subjectInd)
					$('#Topic').text(Subjects[i].name);

			if (data.isQuizOn) {
				console.log('quiz on');
				$('#testdiv').css('display', 'block');
			}
			else
				console.log('quiz off');
		});
	};

	var send = function (val) {
		var data = {
			input:val
		};

		$.post('', data, function () { alert('success'); });
	};
</script>
</body>
</html>
